# SearchPage.vue
<script setup>
import { ref } from 'vue'
import { search } from '@/api/perform'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'

const router = useRouter()
const searchValue = ref('')
const searchResults = ref([])
const loading = ref(false)

// 搜索历史
const searchHistory = ref(['周杰伦'])

// 全国热搜榜
const nationalHotList = ref([
  { name: '刀郎', hot: true },
  { name: '张杰', hot: true },
  { name: '陶喆' },
  { name: '邓紫棋' },
  { name: '周杰伦' },
  { name: '陈奕迅' },
  { name: '十个勤天' },
  { name: '凤凰传奇' },
  { name: '薛之谦' },
  { name: '汪苏泷' }
])

// 同城热搜榜
const localHotList = ref([
  { name: '单依纯 成都' },
  { name: '韦礼安 成都' },
  { name: '谭晶 成都' },
  { name: '崔健「继续撒点野」巡回演唱会' },
  { name: '音乐剧《芝加哥》中国巡演' },
  { name: '一生必看现象级国民舞剧' },
  { name: '张鹤伦·郎鹤炎相声专场' },
  { name: '话剧《雷雨》李六乙导演、' },
  { name: '陈佩斯父子首次同台' },
  { name: '秦潮觉醒' }
])

// 方法
const handleSearch = async (value) => {
  if (!value) return
  
  loading.value = true
  try {
    const res = await search({ keyword: value })
    if (res.code === 1 && res.data) {
      searchResults.value = res.data
      // 添加到搜索历史
      if (!searchHistory.value.includes(value)) {
        searchHistory.value.unshift(value)
      }
    } else {
      searchResults.value = []
    }
  } catch (error) {
    console.error('搜索出错:', error)
    showToast('搜索失败,请重试')
    searchResults.value = []
  } finally {
    loading.value = false
  }
}

const onBack = () => {
  router.back()
}

const clearHistory = () => {
  searchHistory.value = []
}

const onHistoryClick = (keyword) => {
  searchValue.value = keyword
  handleSearch(keyword)
}

const onSearchClick = (keyword) => {
  searchValue.value = keyword
  handleSearch(keyword)
}

const onKeyPress = (e) => {
  if (e.key === 'Enter') {
    handleSearch(searchValue.value)
  }
}
</script>

<template>
  <div class="search-container">
    <!-- 搜索头部 -->
    <div class="search-header">
      <van-search
        v-model="searchValue"
        placeholder="开麦节"
        shape="round"
        background="transparent"
        @keypress="onKeyPress"
        class="flex-1 search-input"
      />
      <div class="cancel-btn" @click="onBack">取消</div>
    </div>

    <!-- 搜索历史 -->
    <div v-if="searchHistory.length && !searchResults.length" class="search-history">
      <div class="section-header">
        <span>搜索历史</span>
        <van-icon name="delete" size="16" class="delete-icon" @click="clearHistory" />
      </div>
      <div class="history-list">
        <span
          v-for="(item, index) in searchHistory"
          :key="index"
          class="history-item"
          @click="onHistoryClick(item)"
        >
          {{ item }}
        </span>
      </div>
    </div>
    
    <div v-else-if="!searchHistory.length && !searchResults.length" class="no-history">
      没有搜索历史
    </div>

    <!-- 热搜榜 -->
    <div v-if="!searchResults.length" class="hot-search">
      <div class="hot-lists">
        <!-- 全国热搜榜 -->
        <div class="hot-section">
          <div class="section-title">全国热搜榜</div>
          <div class="rank-list">
            <div
              v-for="(item, index) in nationalHotList"
              :key="index"
              class="rank-item"
              @click="onSearchClick(item.name)"
            >
              <span :class="['rank-num', {'top3': index < 3}]">{{ index + 1 }}</span>
              <span class="rank-name">{{ item.name }}</span>
              <span v-if="item.hot" class="hot-tag">热</span>
            </div>
          </div>
        </div>

        <!-- 同城热搜榜 -->
        <div class="hot-section">
          <div class="section-title">同城热搜·成都</div>
          <div class="rank-list">
            <div
              v-for="(item, index) in localHotList"
              :key="index"
              class="rank-item"
              @click="onSearchClick(item.name)"
            >
              <span :class="['rank-num', {'top3': index < 3}]">{{ index + 1 }}</span>
              <span class="rank-name">{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索结果 -->
    <div v-if="loading" class="loading-container">
      <van-loading type="spinner" color="#ee0a24" size="24px" />
    </div>

    <div v-else-if="searchResults.length > 0" class="search-results">
      <van-grid :column-num="2" :gutter="10">
        <van-grid-item v-for="item in searchResults" :key="item.performId">
          <div class="result-card">
            <van-image
              :src="item.images || '/api/placeholder/400/200'"
              :alt="item.title"
              width="100%"
              height="120"
              fit="cover"
            />
            <div class="card-content">
              <h3 class="title">{{ item.title }}</h3>
              
              <div class="info">
                <van-text-ellipsis :content="item.name" />
                <div class="meta">
                  <span>演出时间: {{ new Date(item.performTime).toLocaleDateString() }}</span>
                  <span>想看: {{ item.want }}</span>
                </div>
              </div>
              
              <div class="bottom">
                <van-tag type="warning" round>
                  评分: {{ (item.score / 10).toFixed(1) }}
                </van-tag>
                <van-button 
                  type="danger" 
                  size="small" 
                  round
                >
                  查看详情
                </van-button>
              </div>
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>

    <div 
      v-else-if="searchValue && !loading && searchResults.length === 0" 
      class="empty-result"
    >
      <van-empty description="未找到相关演出" />
    </div>
  </div>
</template>

<style scoped>
.search-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #fffbfc, #fff);
  font-family: 'Helvetica Neue', sans-serif;
  padding-bottom: 20px;
}

.search-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #fff;
  z-index: 10;
}

.flex-1 {
  flex: 1;
}

.cancel-btn {
  padding-left: 16px;
  font-size: 15px;
  color: #666;
  cursor: pointer;
}

:deep(.van-search) {
  padding: 0;
}

:deep(.van-search__content) {
  background: rgba(253, 239, 242, 0.5);
  border-radius: 24px;
  box-shadow: none;
}

:deep(.van-search__field) {
  padding: 0 12px;
}

.search-history {
  padding: 16px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 16px;
  color: #444;
  font-weight: 500;
}

.delete-icon {
  color: #aaa;
  cursor: pointer;
}

.history-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-item {
  padding: 8px 14px;
  background: #fce8ec;
  border-radius: 20px;
  font-size: 14px;
  color: #555;
  cursor: pointer;
}

.no-history {
  padding: 16px;
  font-size: 14px;
  color: #888;
  text-align: center;
}

.hot-lists {
  padding: 0 16px;
}

.hot-section {
  margin-bottom: 16px;
  background: #fce8ec;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.section-title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.rank-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  font-size: 15px;
  border-bottom: 1px solid #f9d3dc;
  cursor: pointer;
}

.rank-item:last-child {
  border-bottom: none;
}

.rank-num {
  width: 24px;
  color: #aaa;
  font-size: 14px;
  text-align: center;
}

.rank-num.top3 {
  color: #e6527b;
  font-weight: 600;
}

.rank-name {
  flex: 1;
  color: #444;
  margin-left: 8px;
}

.hot-tag {
  padding: 2px 6px;
  background: #fbd3da;
  border-radius: 4px;
  font-size: 12px;
  color: #e6527b;
  margin-left: 8px;
}

.loading-container {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.search-results {
  margin-top: 12px;
  padding: 0 12px;
}

.result-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-content {
  padding: 8px;
}

.title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.info {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.empty-result {
  padding: 40px 0;
}
</style>